<template>
  <div class="mask">
  <div class="box">
    <p class="p1">
    <div class="line"></div>
    <h2>编辑承建商</h2>
    <el-icon @click="close">
      <close-bold />
    </el-icon>
    </p>
    <div class="info">
      <div class="line1-1"></div>
      <h3>企业信息</h3>
      <div class="mbox">
        <el-form :model="form">
          <div class="box1">
            <el-form-item label="承建商名称" :rules="[{ required: true }]">
              <el-input style="width: 277px; height: 40px" placeholder="请输入承建商名称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="企业登记注册类型">
              <el-select placeholder="---请选择---" style="width: 277px; height: 40px">
                <el-option label="---请选择---"></el-option>
                <el-option label="国有企业"></el-option>
                <el-option label="集体企业"></el-option>
                <el-option label="股份合作企业"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="工商营业执照号">
              <el-input style="width: 277px; height: 40px" placeholder="请输入工商营业执照注册号"></el-input>
            </el-form-item>
            <el-form-item label="企业营业地址">
              <el-input style="width: 277px; height: 40px" placeholder="请输入企业营业地址"></el-input>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="邮政编码">
              <el-input style="width: 277px; height: 40px" placeholder="请输入邮政编码"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人" :rules="[{ required: true }]">
              <el-input style="width: 277px; height: 40px" placeholder="请输入法定代表人姓名" v-model="form.daibiao"></el-input>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="代表人职务">
              <el-input style="width: 277px; height: 40px" placeholder="请输入法定代表人职务"></el-input>
            </el-form-item>
            <el-form-item label="代表人证件">
              <el-select placeholder="身份证" style="width: 277px; height: 40px">
                <el-option label="护照"></el-option>
                <el-option label="其他"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="证件号">
              <el-input style="width: 277px; height: 40px" placeholder="请输入证件号"></el-input>
            </el-form-item>
            <el-form-item label="注册资本" :rules="[{ required: true }]">
              <el-input style="width: 277px; height: 40px" placeholder="请输入注册资本" v-model="form.ziben"></el-input>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="注册日期" >
              <el-date-picker v-model="form.enterdate" type="date" placeholder="请选择注册日期"
                style="width: 277px; height: 40px" value-format="YYYY-MM-DD" >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="成立日期">
              <el-date-picker v-model="form.godate" type="date" placeholder="请选择成立日期" style="width: 277px; height: 40px" value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="info">0
      <div class="line1-1"></div>

      <h3>企业联系信息</h3>
      <div class="mbox">
        <el-form :model="form">
          <div class="box1">
            <el-form-item label="企业联系人">
              <el-input style="width: 277px; height: 40px" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="企业联系手机">
              <el-input style="width: 277px; height: 40px" placeholder="请输入企业联系手机"></el-input>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="企业邮箱">
              <el-input style="width: 277px; height: 40px" placeholder="请输入企业邮箱"></el-input>
            </el-form-item>
            <el-form-item label="企业网站">
              <el-input style="width: 277px; height: 40px" placeholder="请输入企业网址"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <div class="info">
      <div class="line1-1"></div>

      <h3>项目信息</h3>
      <div class="mbox">
        <el-form :model="form">
          <div class="box1">
            <el-form-item label="所属项目" :rules="[{ required: true }]">
              <el-select placeholder="自动带入" style="width: 277px; height: 40px">
                <el-option label="自动带入"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="承建商性质" :rules="[{ required: true }]">
              <el-select placeholder="---请选择---" style="width: 277px; height: 40px" v-model="form.nature">
                <el-option v-for="item in inature" :key="item" :label="item" :value="item"></el-option>

              </el-select>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="项目经理" :rules="[{ required: true }]">
              <el-input style="width: 277px; height: 40px" placeholder="请输入项目负责人" v-model="form.jingli"></el-input>
            </el-form-item>
            <el-form-item label="联系手机" :rules="[{ required: true }]">
              <el-input style="width: 277px; height: 40px" placeholder="请输入联系手机" v-model="form.phone"></el-input>
            </el-form-item>
          </div>

          <div class="box1">
            <el-form-item label="代表人证件" :rules="[{ required: true }]">
              <el-select placeholder="身份证" style="width: 277px; height: 40px" >
                <el-option v-for="item in icard" :key="item" :label="item" :value="item"></el-option>
                
              </el-select>
            </el-form-item>
            <el-form-item label="证件号" :rules="[{ required: true }]">
              <el-input style="width: 277px; height: 40px" placeholder="请输入证件号"></el-input>
            </el-form-item>
          </div>
          <div class="box1">
            <el-form-item label="进场日期" :rules="[{ required: true }]">
              <el-date-picker v-model="form.enterdate" type="date" placeholder="请选择进场日期"
                style="width: 277px; height: 40px" value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="退场日期" :rules="[{ required: true }]">
              <el-date-picker v-model="form.godate" type="date" placeholder="请选择退场日期" style="width: 277px; height: 40px" value-format="YYYY-MM-DD">
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <hr />
    <div class="but">
      <el-form-item>
        <el-button type="primary" @click="save" style="background-color: #FF9900; border: none;">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import { CloseBold } from "@element-plus/icons";
import service from "../../../utils/service";
import { reactive, watch } from "vue";
import { ElMessage } from "element-plus";



// 声明属性
const props = defineProps<{
  id: string;
}>();

// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();

const inature = reactive(["---请选择---", "总包单位", "分包单位", "监理单位"]);
const icard = reactive(["身份证", "护照", "其他"]);

interface Iform {
  id: string;
  name: string;
  nature: string;
  ziben: string;
  daibiao: string;
  jingli: string;
  phone: string;
  enterdate: string;
  godate: string;
}

// 当前管理员的数据
const form = reactive<Iform>({
  id: "",
  name: "",
  nature: "",
  ziben: "",
  daibiao: "",
  jingli: "",
  phone: "",
  enterdate: "",
  godate: "",
});
//根据id 进行获取
const getform = () => {
  service({
    url: "/contractorslist",
    params: {
      id: props.id,
    },
  }).then((res) => {
    form.name = res.data[0].name;
    form.nature = res.data[0].nature;
    form.ziben = res.data[0].ziben;
    form.daibiao = res.data[0].daibiao;
    form.jingli = res.data[0].jingli;
    form.phone = res.data[0].phone;
    form.enterdate = res.data[0].enterdate;
    form.godate = res.data[0].godate;
    console.log(form.godate);
  });
};
watch(
  props,
  () => {
    getform();
    form.id = "";

  },
  {
    deep: true,
  }
);
// 取消
const close = () => {
  // 触发隐藏事件
  emit("hide");
};
// 保存并关闭
const save = () => {
  if (!form.name) {
    ElMessage({
      message: "修改数据为空",
      type: "warning",
    });
  }
  service({
    url: "contractorslist/" + props.id,
    method: "patch",
    data: form,
  }).then((res) => {
    if (form.name) {
      ElMessage({
        message: "修改成功！亲",
        type: "success",
      });
      emit("hide"); //关掉自己
      emit("updatesuccess");
    }
  });
};

</script>

<style scoped>
.mask {
 /* 遮罩层的写法 */
width: 100%;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.line {

  position: absolute;
  left: 0px;
  top: 10px;
  width: 5px;
  height: 22px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.line1-1 {
  position: absolute;
  left: 10px;
  top: 2px;
  width: 3px;
  height: 18px;
  background: inherit;
  background-color: rgba(59, 177, 156, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.box {
  width: 900px;
  height: 600px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  overflow: auto;
}

.el-icon {
  width: 20px;
  height: 20px;
  color: #000;
}

.p1 {
  font-size: 20px;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box1 {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.but {
  margin-top: 10px;
  margin-left: 700px;
}

h2 {
  font-size: 16px;
  color: #666666;
  font-weight: 800;
  margin-top: 8px;
  margin-left: 16px;

}

h3 {
  font-size: 14px;
  color: #666666;
  font-weight: 800;
  margin-top: 20px;
  margin-left: 20px;
}
</style>